<template>
  <div class="allbody">
        <div class="body-btn">
          <div class="sidebar">
            <div class="sidebar-title">标签</div>
            <div class="tags">
              <div class="tags-item" v-for="(tags, index2) in state.tagsList" :key="index2" @click="checkTag(index2)">
                <div class="tags-checkbox">
                  <div :class="tags.check === true ? 'checkbox-two' : 'notcheckbox-two'"></div>
                </div>
                <div class="tags-right">
                  <input class="tags-color" type="color" v-model="tags.color" />
                  <input type="type" class="tags-input" v-model="tags.name" />
                  <button class="tags-not" @click="deleteTag(index2)"><DeleteOutlined style="color: #ff0202" /></button>
                </div>

              </div>
            </div>
            <div class="sidebar-btn">
              <button class="btn-left" @click="addTags()">添加</button>
            </div>
            <div class="sidebar-title">数据</div>
            <div class="sidebars">
              <div class="sidebar-item" v-for="(annotation, index) in annotations[state.currentPage - 1]" :key="annotation.id">
                <div class="sidebar-item-font">{{ index + 1 }}.{{ annotation.name }}</div>
                <button class="sidebar-item-icon" @click="removeAnnotation(annotation.id)"><DeleteOutlined style="color: #ff0202" />111</button> </div
            ></div>
            <div class="body-top">
          <button class="top-item2" @click="clearAnnotations">清空</button>
        </div>
          </div>
          <div class="btn-content">
            <div class="image-container">
              <!-- <img :src="imageUrl" alt="Character Image" /> -->
              <img src="./404.png" @mousedown="startAnnotation" @mousemove="updateAnnotation" @mouseup="endAnnotation" />
              <!-- 使用canvas覆盖在图片上方，用于绘制临时矩形 -->
              <canvas ref="annotationCanvas"></canvas>
              <div v-for="annotation in annotations[state.currentPage - 1]" :key="annotation.id" class="annotation" :style="annotationStyle(annotation)">
                <div class="label">1111{{ annotation.label }}</div>
              </div>
            </div>
     
          </div>

        </div>
      </div>
  </template>
  <script setup>
    import { DeleteOutlined } from '@ant-design/icons-vue';
    import { Pagination } from 'ant-design-vue';
   import { reactive,onMounted} from 'vue'

   
    const state = reactive({
      tagsList: [], // 标签列表
      canvasX: 0,
      canvasY: 0,
      currentPage: 1,
      pageSize: 1,
      imageUrls: './404.png',
      // imageUrls: [apiUrl.value + '/api/File/Image/annexpic/20241203Q9NHJ.jpg', apiUrl.value + '/api/file/Image/document/20241225QBYXZ.jpg'],
    });
   

    const annotations = reactive([[]]);
    let currentAnnotation= null;
   
    //开始标注
    function startAnnotation(event) {
      // 获取当前选中的标签
      var tagsCon = { id: 1, check: true, color: '#000000', name: '安全帽' };
      // 遍历标签列表，获取当前选中的标签
      for (var i = 0; i < state.tagsList.length; i++) {
        if (state.tagsList[i].check) {
          tagsCon.id = state.tagsList[i].id;
          tagsCon.check = state.tagsList[i].check;
          tagsCon.color = state.tagsList[i].color;
          tagsCon.name = state.tagsList[i].name;
        }
      }
      // 创建新的标注
      currentAnnotation = {
        id: crypto.randomUUID(),
        name: tagsCon.name,
        x: event.offsetX,
        y: event.offsetY,
        width: 0,
        height: 0,
        color: '#000000',
        label: (annotations[state.currentPage - 1].length || 0) + 1 + tagsCon.name,
        border: tagsCon.color,
      };
      annotations[state.currentPage - 1].push(currentAnnotation);
   
      //记录鼠标按下的位置
      state.canvasX = event.offsetX;
      state.canvasY = event.offsetY;
   
      //监听鼠标如果是按下后马上抬起，结束标注
      const mouseupHandler = () => {
        endAnnotation();
        window.removeEventListener('mouseup', mouseupHandler);
      };
      window.addEventListener('mouseup', mouseupHandler);
    }
   
    //更新标注
    function updateAnnotation(event) {
      if (currentAnnotation) {
        //更新当前标注的宽高,为负数时，鼠标向左或向上移动
        currentAnnotation.width = event.offsetX - currentAnnotation.x;
        currentAnnotation.height = event.offsetY - currentAnnotation.y;
      }
   
      //如果正在绘制中，更新临时矩形的位置
      if (annotationCanvas.value) {
        const canvas = annotationCanvas.value;
        //取得类名为image-container的div的宽高
        const imageContainer = document.querySelector('.image-container');
        canvas.width = imageContainer?.clientWidth || 800;
        canvas.height = imageContainer?.clientHeight || 534;
        const context = canvas.getContext('2d');
        if (context) {
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.strokeStyle = currentAnnotation?.border || '#000000';
          context.lineWidth = 2;
          context.strokeRect(state.canvasX, state.canvasY, currentAnnotation?.width || 0, currentAnnotation?.height || 0);
        }
      }
    }
   
    function endAnnotation() {
      //刷新annotations[state.currentPage - 1]，触发重新渲染
      annotations[state.currentPage - 1] = annotations[state.currentPage - 1].slice();
      currentAnnotation = null;
    }
   
    function annotationStyle(annotation) {
      //如果宽高为负数，需要调整left和top的位置
      const left = annotation.width < 0 ? annotation.x + annotation.width : annotation.x;
      const top = annotation.height < 0 ? annotation.y + annotation.height : annotation.y;
      return {
        left: `${left}px`,
        top: `${top}px`,
        width: `${Math.abs(annotation.width)}px`,
        height: `${Math.abs(annotation.height)}px`,
        border: `2px solid ${annotation.border}`,
      };
    }
   
    // 选择标签
    function checkTag(index2) {
      state.tagsList.forEach((item, index) => {
        if (index === index2) {
          item.check = true;
        } else {
          item.check = false;
        }
      });
    }
   
    // 删除标签
    function deleteTag(index) {
      state.tagsList.splice(index, 1);
    }
   
    function addTags() {
      state.tagsList.push({ id: state.tagsList.length + 1, check: false, color: '#000000', name: '' });
    }
   
    // 移除某个标注
    function removeAnnotation(id) {
      const index = annotations[state.currentPage - 1].findIndex(a => a.id === id);
      if (index !== -1) {
        annotations[state.currentPage - 1].splice(index, 1);
      }
    }
   
    // 清空所有标注
    function clearAnnotations() {
      annotations[state.currentPage - 1].splice(0, annotations[state.currentPage - 1].length);
    }
   
    onMounted(() => {
      for (let i = 0; i < state.imageUrls.length; i++) {
        annotations.push([]);
      }
    });
   
  </script>
  <style>
    .body-top {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      width: 85%;
    }
    .top-item1 {
      width: 70px;
      height: 28px;
      line-height: 26px;
      text-align: center;
      background-color: #028dff;
      border: 1px solid #028dff;
      border-radius: 5px;
      font-size: 14px;
      color: #fff;
      margin-left: 20px;
    }
    .top-item2 {
      width: 70px;
      height: 28px;
      line-height: 26px;
      text-align: center;
      background-color: rgb(255, 2, 2);
      border: 1px solid rgb(255, 2, 2);
      border-radius: 5px;
      font-size: 14px;
      color: #fff;
      margin-left: 20px;
    }
    .body-btn {
      margin: 0;
      padding: 10px 13px 0 0;
      min-height: 630px;
      display: flex;
      background-color: #f5f5f5;
    }
    .btn-content {
      flex-grow: 1;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .image-container {
      height: 500px;
      margin: 40px;
    }
    .image-container img {
      height: 500px !important;
    }
    .ant-pagination {
      margin-bottom: 18px;
    }
    .number-input {
      width: 70px;
      border: 1px solid #ccc;
      border-radius: 4px;
      text-align: center;
      font-size: 16px;
      background-color: #f9f9f9;
      outline: none;
      color: #66afe9;
    }
    .sidebar {
      display: flex;
      flex-direction: column;
      width: 280px;
      height: 640px;
      background-color: #fff;
      padding: 10px;
      border-radius: 7px;
    }
    .sidebar-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .sidebars {
      overflow: auto;
    }
    .sidebar .tags {
      margin-bottom: 10px;
    }
    .tags-item {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .tags-checkbox {
      width: 24px;
      height: 24px;
      border-radius: 50px;
      border: 1px solid #028dff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 7px;
    }
    .checkbox-two {
      background-color: #028dff;
      width: 14px;
      height: 14px;
      border-radius: 50px;
    }
    .notcheckbox-two {
      width: 14px;
      height: 14px;
      border-radius: 50px;
      border: 1px solid #028dff;
    }
    .tags-right {
      display: flex;
      flex-direction: row;
      align-items: center;
      background-color: #f5f5f5;
      border-radius: 5px;
      padding: 5px;
      width: 90%;
    }
    .tags-color {
      width: 26px;
      height: 26px;
      border-radius: 5px;
    }
    .tags-input {
      border: 1px solid #fff;
      width: 153px;
      margin: 0 10px;
    }
    .tags-not {
      border: 1px solid #f5f5f5;
      font-size: 12px;
    }
    .sidebar-btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: right;
    }
    .btn-left {
      width: 60px;
      height: 28px;
      line-height: 26px;
      text-align: center;
      border: 1px solid #028dff;
      border-radius: 5px;
      font-size: 14px;
      color: #028dff;
    }
    .btn-right {
      width: 60px;
      height: 28px;
      line-height: 26px;
      text-align: center;
      background-color: #028dff;
      border: 1px solid #028dff;
      border-radius: 5px;
      font-size: 14px;
      color: #fff;
      margin-left: 10px;
    }
    .sidebar-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 2px;
    }
    .sidebar-item-font {
      margin-right: 10px;
    }
    .sidebar-item-icon {
      font-size: 12px;
      border: 1px solid #fff;
    }
   
    .image-annotator {
      display: flex;
      height: 100%;
    }
   
    .image-container {
      flex: 1;
      position: relative;
      overflow: auto;
    }
   
    .image-container img {
      max-width: 100%;
      height: auto;
    }
   
    .annotation {
      position: absolute;
   
      box-sizing: border-box;
    }
   
    canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none; /* 防止遮挡鼠标事件 */
    }
  </style>